﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Aulas Web</title>
        <link rel="shortcut icon" href="../imagenes/edu.png" type="image/x-icon" />
        <link type="text/css" href="../css/aulas.css" rel="stylesheet" />
        <link id="cssRef" type="text/css" href="../css/dark-hive/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
       <style type="text/css">
        .thrColFixHdr #footer { bottom: 0;  margin: 0 1%; padding: 0 !important; text-align: center; width: 98%;}
		#inicio{padding: 0 5% 5% 5%;}
		/*Texto(general)*/
ul#icons {	margin: 5px 15px; padding: 0;}
ul#icons li {margin: 4px; position: relative; padding: 4px 0; cursor: pointer;float: left; list-style: none;}
ul#icons span.ui-icon {	float: left; margin: 0 4px;}
#inicio {position: relative; height: 100% !important; display:block;}
.readme .texto {font-size: 15px; text-align: justify;}
.readme .chico {text-align: left;}
.readme .titulos {font-size: 25px; text-align: center;}
.thrColFixHdr #mainContent {width: 80%; height: auto; margin: 0% 10%}
		</style>   
		   
		<script src="../js/aulas/config_file.js" type="text/javascript" ></script> 
        <script src="../js/aulas/cookies.js" type="text/javascript"></script>
        <script src="../js/jquery/jquery-1.5.1.min.js" type="text/javascript" ></script>
        <script src="../js/jquery/jquery-ui-1.8.11.custom.min.js" type="text/javascript" ></script>
		<script type="text/javascript">
		
		 //menu de items header
		 $(document).ready(function() {
						cargarDatosCookies();


						
						var dock = 	 function (dock, sMin, sMax) {
							/* ---- private vars ---- */
							var xm = xmb = ov = 0;
							var M = true;
							var icons = document.getElementById(dock).getElementsByTagName('img');
							var N = icons.length;
							var s = sMin;
							var ovk = 0;
							var addEvent = function (o, e, f) {
								if (window.addEventListener) o.addEventListener(e, f, false);
								else if (window.attachEvent) r = o.attachEvent('on' + e, f);
							};
							var pxLeft = function(o) {
								for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft;
								return x;
							};
							for(var i=0;i<N;i++) {
								var o = icons[i];
								o.style.width = sMin+"%";
//								o.style.height = sMin+"%";
								o.className = "dockicon";
							}
							var run = function() {
								for(var i=0;i<N;i++) {
									var o = icons[i];
//									var W = parseInt(o.style.width);
									if(ov && ov.className=="dockicon") {
										if(ov!=ovk){
											ovk=ov;
											document.getElementById("legend").innerHTML = ov.lang.replace('_',' ');
										}
//										if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin);
//										s = Math.min(sMax,s+.5);
									} else {
//										s = Math.max(s-.5,sMin);
//										W = Math.max(W-N,sMin);
									}
//									o.style.width = W+"%";
//									o.style.height = W+"%";
//									o.style.paddingTop = sMax-W +"%";//JEIB
								}
								if(s >= sMax) M = false;
							};
							addEvent(document, 'mousemove', function (e) {
								if(window.event) e=window.event;
								xm = (e.x || e.clientX);
								if(xm!=xmb){
									M = true;
									xmb = xm;
								}
								ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null);
								run();
							});
//							setInterval(run, 16);
						};
					 
						$("#divLogo").append('<img id="logo" src="../imagenes/dock/'+nombreImagenLogo+'" alt="nada" />');
						
						
				dock("dock", 8, 10);//menu de items header	(OBS: el codigo del dock esta modificado para que no se anime y en porcentajes en vez de px)
						
						
						$( "#aboutus" ).dialog({	height: 200, width:400 ,modal: true,autoOpen: false,	
									buttons: {	Ok: function() {$( this ).dialog( "close" );}	}});
								$( "#aboutus" ).dialog( "option", "zIndex", 15000 );				
					}
		 );//fin onload	
		 
		 
		 
			function aboutus(){
						document.getElementById('aboutus').innerHTML = '<p>Comision:<p><li>COTRONEO, Alejandro Andres. LU: 74523</li><li>IBANEZ BONDZIO, Jesus Emanuel. LU: 85166</li>';
						$('#aboutus').dialog('open');
			}
			
			
			
			function cargarDatosCookies() {
				
						var estilo = getCookie("estilo");
						if (estilo) {
							var cssRef = document.getElementById("cssRef");
							var imagenLogo = document.getElementById("logo");
							if (estilo == "1") {
								cssRef.setAttribute("href",
									"../css/dark-hive/jquery-ui-1.8.11.custom.css");
							imagenLogo.setAttribute("src", "../imagenes/dock/"+nombreImagenLogo+".png");
							$(".subContenidoSI").each(function(index){$(this).addClass("subContenidoSI_fondoOscuro");});
							}
							
							else {
								cssRef.setAttribute("href","../css/ui-lightness/jquery-ui-1.8.11.custom.css");
								imagenLogo.setAttribute("src",  "../imagenes/dock/"+nombreImagenLogo+".png");
								$(".subContenidoSI").each(function(index){$(this).removeClass("subContenidoSI_fondoOscuro");});
							}
						}

			}
		</script>
		
	
		
    </head>
    <body class="thrColFixHdr fondo">
        <div id="container">
            <div id="header" class="ui-widget-content ui-corner-all">
                <table border="0px" class="tablaHeader">
                    <tr>
                        <td style="width: 20%">
                           <div id="divLogo"> </div>
                        </td>
                        <td style="width: 80%;">
                           <!-- <div class="divBotonEstilo">
                                <button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="cambiarEstilo()">
                                    Cambiar estilo
                                </button>
                            </div>
							-->
                            <div class="dock_div">
                                <div id="dock">
                                    <a href="../index.php"><img class="dockicon" src="../imagenes/dock/Home.png" lang="Home" alt="nada" /></a>								
									<a href="#"><img class="dockicon" src="../imagenes/dock/contacto.png" onclick="aboutus()" alt="nada" lang="Comision" /></a>
									<a href="#"><img class="dockicon" src="../imagenes/dock/aboutus.png"  alt="nada" lang="Readme" /></a>
									   <div id="legend" class="ui-text-color">
                                    </div>
                                </div>								 
                            </div>

                        </td>
                    </tr>
                </table>
                <!-- end #header -->
            </div>

            <div id="sidebar1">
               
                <!-- end #sidebar1 -->
            </div>
            <div id="sidebar2">
                
            </div>
            <div id="mainContent">
                <div id="inicio" class="readme contenedor_screen ui-widget-content ui-corner-all" >
                  
						
						
<h2 class="titulos">Descripcion General</h2>
<div class="texto">Aulas Web permite visualizar caminos entre dos ubicaciones <i>Inicio</i> - <i>Destino</i> dentro del Edificio de Alem</div><br>
<div class="texto">Es una aplicación basada en WebGl, por lo que será necesario que cuente con un navegador que soporte esta tecnología</div>

<h2 class="titulos">Observaciones</h2>
<div class="texto">Para configurar WebGL en Firefox, habilitar las propiedades: <code>Webgl.force-enabled, Webgl.shader_validator y webgl.prefer-native-gl</code> en <code>about:config</code></div>
<div class="texto">Para configurar WebGL en Chrome, habilitar las propiedades: <code>'Composición acelerada por GPU' y 'WebGL'</code> en <code>about:flags</code></div>


<h2 class="titulos">Herramientas y librerias utilizadas</h2>
<li class="texto"><a href="https://github.com/mrdoob/three.js/">https://github.com/mrdoob/three.js/</a>      <p>Motor de render 3D en Javascript</p> </li>
<li class="texto"><a href="http://jquery.com/">http://jquery.com/</a>      <p>   Paquete de librerías que provee varias funcionalidades. Para los css´s se utilizaron los themes "Dark-hive" y "ui-lightness"</p> </li>
<li class="texto"><a href="http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/">http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/</a>      <p>   Plugin de JQuery para generar sliders horizontales con etiquetas.</p> </li>
<li class="texto"><a href="http://www.pirolab.it/pirobox/feb_2011.html">http://www.pirolab.it/pirobox/feb_2011.html</a>      <p>   Plugin de JQuery para implementar galerías de imágenes.</p> </li>


                </div>
                
            </div>
            
            <br class="clearfloat" />
			
            <div id="footer" class="ui-widget-content ui-corner-all">
                <h3 class="ui-text-color">Aulas Web [Pathfinder]&copy; - Designed by: JEIB & AAC</h3>
                <!-- end #footer -->
            </div>
			</div>
            <!-- end #container -->
  
        <!-- diagolos -->
   
        <div id="aHome" class="dialog-modal" title="Confirmacion">
        </div>
		<div id="aboutus" class="dialog-modal" title="Confirmacion">
        </div>
    </body>
</html>
